import React, {useState, useEffect} from "react";
import {SearchPanel} from "./search-panel";
import {List} from './list'
import {cleanObject, useDebounce, useDocumentTitle, useMount} from "../../utils";
import {useHttp} from "../../utils/http";
import styled from "@emotion/styled";
import {Button, Typography} from "antd";
import {useAsync} from "utils/use-async";
import {Project} from 'screens/project-list/list'
import {useProjects} from 'utils/project'
import {useUsers} from "utils/user";
import {useUrlQueryParam} from "utils/url";
import {useProjectSearchParams} from "./util";
import {Row} from 'components/lib'

export const ProjectListScreen = (props: { projectButton:JSX.Element}) => {
    useDocumentTitle('项目列表', false)

    const [param, setParam] = useProjectSearchParams()
    const {isLoading, error, data: list, retry} = useProjects(useDebounce(param, 200))
    const {data: users} = useUsers()
    console.log(retry, 'retry')
    return (
        <Container>
            <Row between={true}>
                <h1>项目列表</h1>
                {props.projectButton}
            </Row>
            <SearchPanel users={users || []} param={param} setParam={setParam}/>
            {error ? <Typography.Text type={"danger"}>{error.message}</Typography.Text> : null}
            <List projectButton={props.projectButton} refresh={retry} loading={isLoading} users={users || []} dataSource={list || []}/>
        </Container>
    )
}
// ProjectListScreen.whyDidYouRenter = true
// //相当于
// // class Test extends React.Component<any,any>{
// //     static whyDidYouRenter=true
// // }
const Container = styled.div`padding: 3.2rem;`


